<template>
  <div class="content">
    <status-bar />
    <div class="nav-bar">

      <p :class="{activeTab:'信息流'===activeTab}"
         @click="getIndexPosts">信息流</p>

      <p :style="{color:'#ddd'}">|</p>

      <p :class="{activeTab:'仅看主题'===activeTab}"
         @click="getThreadPosts">仅看主题</p>

      <p :style="{color:'#ddd'}">|</p>

      <p :class="{activeTab:'@我的'===activeTab}"
         @click="getAtMePosts">@我的</p>

    </div>
    <ul class="post-list">
      <li v-for="(post,index) in posts"
          :key="index">
        <post-list-card :post='post'
                        :isMine="false" />
      </li>
    </ul>
    <uniLoadMore />

  </div>
</template>

<script>

import postListCard from '../../components/postListCard'
import indexApi from '../../api/indexApi'
import setQuoteMsg from '../../tools/setQuoteMsg'
import { uniLoadMore, uniPopup } from '@dcloudio/uni-ui'


export default {
  data () {
    return {
      posts: {},
      curtime: 0,
      nexttime: 0,
      activeTab: '信息流'
    }
  },
  components: {
    postListCard,
    uniLoadMore
  },
  onLoad () {
    this.indexPosts()
  },
  // 下拉刷新
  onPullDownRefresh () {
    if (this.activeTab === '信息流') this.indexPosts()
    else if (this.activeTab === '仅看主题') this.threadPosts()
    else this.getMoreAtMePosts()
    uni.stopPullDownRefresh()
  },
  // 上拉加载
  onReachBottom () {
    if (this.activeTab === '信息流') this.moreIndexPosts()
    else if (this.activeTab === '仅看主题') this.moreThreadPosts()
    else this.getMoreAtMePosts()
  },

  computed: {

  },
  methods: {
    // 格式化帖子
    setQuoteMsg (list) {
      const posts = list.map(item => {
        if (item.isquote) {
          return setQuoteMsg(item)
        } else {
          return item
        }
      })
      return posts.reverse()
    },

    // 请求信息流
    indexPosts () {
      this.posts = []
      indexApi.getIndexPosts()
        .then(res => {
          this.posts = this.setQuoteMsg(res.data)
          this.curtime = res.curtime
          this.nexttime = res.nexttime
        })
    },


    // 请求更多信息流
    moreIndexPosts () {
      indexApi.getMoreIndexPosts(this.nexttime)
        .then(res => {
          const posts = this.setQuoteMsg(res.data)
          for (let post of posts.reverse()) {
            this.posts.push(post)
          }
          this.nexttime = res.nexttime
        })
    },


    // 请求主题帖子列表
    threadPosts () {
      this.posts = []
      indexApi.getThreadPosts()
        .then(res => {
          this.posts = this.setQuoteMsg(res.data)
          this.curtime = res.curtime
          this.nexttime = res.nexttime
        })
    },

    // 请求更多主题帖子列表
    moreThreadPosts () {
      this.posts = []
      indexApi.getMoreThreadPosts(this.nexttime)
        .then(res => {
          const posts = this.setQuoteMsg(res.data)
          for (let post of posts.reverse()) {
            this.posts.push(post)
          }
          this.nexttime = res.nexttime
        })
    },




    // 只看信息流
    getIndexPosts () {
      this.activeTab = '信息流'
      this.indexPosts()
    },

    // 只看主题
    getThreadPosts () {
      this.activeTab = '仅看主题'
      this.threadPosts()
    },

    // 只看@我的
    getAtMePosts () {
      this.activeTab = '@我的'
      this.posts = []
      indexApi.getAtMePosts()
        .then(res => {
          this.posts = this.setQuoteMsg(res.data)
          this.nexttime = res.nexttime
        })
    },

    // 请求更多@我的
    getMoreAtMePosts () {
      indexApi.getMoreAtMePosts(this.nexttime)
        .then(res => {
          const posts = this.setQuoteMsg(res.data)
          for (let post of posts.reverse()) {
            this.posts.push(post)
          }
          this.nexttime = res.nexttime
        })
    }


  }
}
</script>

<style lang="scss" scoped>
.post-list {
  border-radius: 30rpx;
  margin-top: 120rpx;
  li {
    margin: 40rpx 0rpx;
    padding: 20rpx 40rpx 30rpx;
    border-radius: 10rpx;
    background: #fff;
  }
}

.nav-bar {
  width: 100%;
  display: flex;
  padding: 0 20rpx;
  // justify-content: center;
  align-items: center;
  background: #09c;
  color: #ddd;
  position: fixed;
  z-index: 998;
  box-shadow: 0 0 4rpx 4rpx rgba(#333, 0.5);
  p {
    padding: 20rpx;
    text-align: center;
    font-size: 30rpx;
  }
  .activeTab {
    color: #fff;
    margin-top: 8rpx;
    border-bottom: 8rpx solid #fff;
  }
}
</style>
